<template>
    <div class="box">
       <header>
         <i @click="back" class="iconfont">&#xe663;</i>
         <p>我的订单</p>
         
     </header>
     <main>
         <div class="ding" v-for="item,i in ding" :key="i" v-if="item.isTrue_pei!==0">
             <p class="top">
                 <em>{{shop.name}}</em>
                 <em>{{item.isTrue_pei==2?'已完成':'配送中'}}</em>
            </p>
               <ul>
                   <li v-for="items,index in item.arr" :key="index">
                       <img :src="$image+items.food_img" alt="">
                       <p>{{items.name}}</p>
                       
                   </li>
               </ul>
               <dl>
                    
                    <p>下单时间：{{item.time}}</p>
                    <p>共{{item.arr.length}}件  合计 ￥<span>{{item.money}}</span></p>
                </dl>
                <div @click="show($event)" style="position:relative;text-align:left;margin:1vw 0;display:flex;justify-content: space-between;">
                    <p style="font-size:12px;">订单信息</p>
                    <i ref="jian" class="iconfont qian">&#xe638;</i>
                   
                </div>
                  <transition name="dXin">
                    <ul class="dX" v-show="bool" style="">
                            <li>
                                <dl style="font-size:12px;color:gray">配送:<em style="color:orange">{{item.pei_people.name}}</em></dl>
                            </li>
                            <li>
                                <dl style="font-size:12px;color:gray">联系方式:<em style="color:green">{{item.pei_people.phone}}</em></dl>
                            </li>
                            <li>
                                <dl style="font-size:12px;color:gray">订单编号:<em style="color:blue">{{item.ding_Id}}</em></dl>
                            </li>
                        </ul>
                </transition>
                 
                <div v-show="item.isTrue_pei==2">
                    <button style="border:0;background-color: rgb(250, 205, 5);">再来一单</button>
                    <button @click="pingJia(item)" v-show="item.isTrue_ping!==1">评价</button>
                </div>
                <div v-show="item.isTrue_pei!==2">
                    <button @click="trueShou(item.Id)">确认收货</button>
                </div>
         </div>
        
     </main>
    </div>
</template>

<script>
import {ajax_dDList,ajax_trueShou} from '../ajax/index'
import {mapState} from 'vuex'
export default {
    name: '',
     inject:['reload'],
    data(){
        return{
           ding:[],
           content:[],
           bool:false,
           timer:''
        }
    },
    methods:{
        back(){
            this.$router.push('/')
        },
        pingJia(item){
            this.$router.push({
                path:'/userPing',
                name:"用户评价",
                params:{
                    name:'订单信息',
                    data:item
                }
            })
        },
        show(e){
           this.bool=!this.bool;
           console.log(e.target)
           console.log(e.target.nextSibling)
           e.target.nextSibling.classList.toggle("dX")
        //    console.log(e.target)
        // console.log(this.$refs.jian[0])
          this.$refs.jian[0].classList.toggle("zhuan")
        },
        trueShou(id){
           console.log(id)
           ajax_trueShou({
               ding_Id:id,
               isTrue_pei:2
           }).then(res=>{
               console.log(res)
               this.reload()
           })
        }
    },
    computed:{
       ...mapState(['users','shop'])
    },
    created(){
         new Promise((resolve,reject)=>{
            ajax_dDList({
            Id:this.users.Id
            }).then(data=>{
                // console.log(data)
                this.ding=data.userDd.reverse()
                resolve(data.userDd)
            })
        }).then(data=>{
            // console.log(data)
        }),
        this.timer=setInterval(() => {
            new Promise((resolve,reject)=>{
            ajax_dDList({
                Id:this.users.Id
                }).then(data=>{
                    // console.log(data)
                    this.ding=data.userDd.reverse()
                    resolve(data.userDd)
                })
            }).then(data=>{
                // console.log(data)
            })
        }, 4*1000);
        
    },
     beforeDestroy(){
         clearInterval(this.timer)
        this.timer=''
    },
    // destroyed(){
    //     clearInterval(this.timer)
    //     this.timer=null;
    // }
}
</script>

<style scoped>
.dX{
    display: none;
}
.qian{
    transition: all 1s;
    transform: rotate(0deg);
}
.zhuan{
    transition: all 1s;
    transform: rotate(90deg);
}
.dXin-enter{
    height: 0;
    opacity: 0;
}
.dXin-enter-active{
    transition: all 1s;
}
.dXin-enter-to{
    height:10vh;
    opacity: 1;
}
.dXin-leave{
    height:10vh;
    opacity: 1;
}
.dXin-leave-active{
    transition: all 1s;
}
.dXin-leave-to{
    height: 0;
    opacity: 0;
}
.top{
    display: flex;
    justify-content: space-between;
}
.top>em{
    margin: 0 1vw;
}
.box{
    height: 100vh;
    background-color: rgb(250, 250, 250);
}
header{
    position: fixed;
    top: 0;
    width: 100vw;
    padding: 2vh 0;
    text-align: center;
    color: white;
    background-image: linear-gradient(to right top,rgba(228, 100, 26, 0.9),rgba(174, 0, 255, 0.5),rgba(4, 0, 255, 0.747));
}
header>i{
    
  position: absolute;
  left: 5vw;
}
ul{
    padding: 2vw 0;
    /* border-top: 1px solid #666; */
    /* margin: .5vw 0; */
   
}
ul>li{
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    margin: 1vh 0;
}
li>img{
    width:15vw;
    height: 15vw;
    border-radius: 4px;
}
li>p{
    color: gray;
    margin-left: 2vw;
}
.ding{
    padding: 2.5vw;
    margin: 2vw;
    background-color: white;
    border-radius: 6px;
    
}
.ding>p{
    height: 4vh;
    line-height: 4vh;
    font-weight:600;
    font-family: '方正小体';
    background-image: linear-gradient(to top right,white,rgb(255, 145, 0),rgb(183, 0, 255));
    border-top-left-radius: 12px;
    border-bottom-right-radius:12px;
}
.ding>dl{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666;
}
dl>p{
font-size: 10px;
}
dl span{
    font-weight: bolder;
    color:black;
    font-size: 14px;
}
.ding>div{
    text-align: right;
}
.ding button{
    width: 18vw;
    height: 4vh;
    outline: 0;
    border: 0;
    background-color: rgb(253, 253, 251);
    border:1px solid gray;
    border-radius: 10px;
    margin: 1.5vw 1vw;
    font-size: 12px;
}
main{
     margin-bottom: 10vh;
     margin-top: 7vh;
}
</style>